<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>布局常见的产品展示效果</title>
    <style>
      /* 清除格式 */
      body,
      p,
      h3 {
        margin: 0;
        padding: 0;
      }
      /* 去掉图片间间隙 */
      .product .product-text .product-mark {
        font-size: 0px;
      }
      a {
        text-decoration: none;
        color: initial;
        display: block;
      }

      /* 格式 */
      .product {
        width: 268px;
        /* height: 300px; */
        /* background-color: red; */

        margin: 50px auto 0;
        border: 1px solid #ddd;

        text-align: center;
      }
      .product p.describe {
        color: #845f3f;
        font-size: 16px;
      }
      .product .product-text {
        /* height: 100px; */
        background-color: #f8f8f8;

        margin-top: 20px;
        padding: 15px;
      }
      .product .product-text .product-mark img {
        margin: 0px 2px;
      }
      .product .product-text h3 {
        font-size: 20px;

        margin: 20px 0 15px;
      }
      .product .product-text p {
        color: #a92112;
        font-size: 20px;
      }
    </style>
  </head>
  <body>
    <div class="product">
      <a href="https://www.baidu.com/" target="_blank">
        <img src="./images/kettle.png" alt="水壶" height="195px" />
        <p class="describe">快速煮水，安心饮用</p>
        <div class="product-text">
          <div class="product-mark">
            <img src="images/live.png" alt="直播中" height="20px" />
            <img src="images/odds.png" alt="特惠" height="20px" />
            <img src="images/30day.png" alt="30天保价" height="20px" />
            <img src="images/server.png" alt="售后免邮" height="20px" />
          </div>
          <h3>云米电水壶</h3>
          <p>¥59</p>
        </div>
      </a>
    </div>
  </body>
</html>
